<template>
  <div id="zhutiye">
<el-container style="height: 100%;">
		    
			<el-header class="logo" style="height: 40px;">知识人
				<span class="font_yahei_18px" >hello,zhaoxiaofei,2018.1.21,07:12</span>
				<div class="font_yahei_18px" style="width:120px;float:right;display:inline-block;line-height:40px;">
					<a class="a_noline" target="_blank" href="/#/denglu">退出</a>
				</div>
			</el-header>
		    
			<el-container>
				<el-main style="padding: 0;background-color: #FCFCFC;text-align: left; overflow:hidden;">
					<el-menu default-active="1" class="el-menu-demo" mode="horizontal" @select="handleSelect" 
					style="margin:0;background-color: #F5F5F5;margin:0 0 0 120px;">
					  <el-menu-item @click="daohang1" index="1" class="font_yaoti_20px" >今日新闻</el-menu-item>
					  <el-menu-item @click="daohang2" index="2" class="font_yaoti_20px" >关注历史</el-menu-item>
					  <el-menu-item @click="daohang3" index="3" class="font_yaoti_20px" >朋友圈子</el-menu-item>
					  <el-menu-item @click="daohang4" index="4" class="font_yaoti_20px" >我的主页</el-menu-item>
					  <el-menu-item @click="daohang5" index="5" class="font_yaoti_20px" >知识地图</el-menu-item>
					  <el-menu-item @click="daohang6" index="6" class="font_yaoti_20px" >个性设置</el-menu-item>
					  <el-menu-item @click="daohang7" index="7" class="font_yaoti_20px" >本站介绍</el-menu-item>
					</el-menu>
					<div v-show="dh1" id="zhuti1">
						<div class="div_900px" style="text-align: right;width:120px;float:left;;background: #FFFFFF;">
							<el-menu default-active="11" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" style="border:0px;">
						      <el-menu-item index="11" class="font_yaoti_18px">
						        <span slot="title">今日全部</span>
						      </el-menu-item>
						      <el-menu-item index="12" class="font_yaoti_18px">
						        <span slot="title">特别关注</span>
						      </el-menu-item>
						      <el-menu-item index="13" class="font_yaoti_18px">
						        <span slot="title">小组新闻</span>
						      </el-menu-item>
						      <el-menu-item index="14" class="font_yaoti_18px">
						        <span slot="title">历史新闻</span>
						      </el-menu-item>
						  </el-menu>
						</div>
						<div class="div_900px"  style="text-align: left;width:auto;float:left;">
							<div class="first_row_words">
								今天共有12条新闻。
								<a @click="zhankai11" v-show="zk11" class="a_noline" href="#">-点击展开-</a>
								<chazhaolan :chazhaotype=11 v-show="czl11"></chazhaolan>
							<xh11 :xhtype=11 :items="items" v-show="czl11"></xh11> 
							</div>




						</div>
					</div>

					<div v-show="dh2"  id="zhuti2">
						<div class="div_900px" style="text-align: right;width:120px;float:left;;background: #FFFFFF;">
							<el-menu default-active="02" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" style="border:0px;">
						      <el-menu-item index="21" class="font_yaoti_18px" @click="daohang21">
						        <span slot="title">标签</span>
						      </el-menu-item>
						      <el-menu-item index="22" class="font_yaoti_18px" @click="daohang22">
						        <span slot="title">整文</span>
						      </el-menu-item>
						      <el-menu-item index="23" class="font_yaoti_18px">
						        <span slot="title">段落</span>
						      </el-menu-item>
						      <el-menu-item index="24" class="font_yaoti_18px">
						        <span slot="title">短文</span>
						      </el-menu-item>
						      <el-menu-item index="25" class="font_yaoti_18px">
						        <span slot="title">数集</span>
						      </el-menu-item>
						      <el-menu-item index="26" class="font_yaoti_18px">
						        <span slot="title">数据</span>
						      </el-menu-item>
						      <el-menu-item index="27" class="font_yaoti_18px">
						        <span slot="title">用户</span>
						      </el-menu-item>
						      <el-menu-item index="28" class="font_yaoti_18px">
						        <span slot="title">小组</span>
						      </el-menu-item>




						    </el-menu>
						</div>

						<div class="div_900px" v-show="dh21" style="text-align: left;width:auto;float:left;">
							<div class="first_row_words">
								今天共有12条新闻。
								<a @click="zhankai21" v-show="zk21" class="a_noline" href="#">-点击展开-</a>
								<chazhaolan :chazhaotype=21 v-show="czl21"></chazhaolan>
{{msg}}
								<div v-for="item in content">

									<router-link tag="a" target="_blank" :to="{name:'denglu',query:{key:item.link}}" >{{item.link}}</router-link>
								</div>

							</div>
						</div>


						<div class="div_900px" v-show="dh22" style="text-align: left;width:auto;float:left;">这是导航22的页面</div>
					</div>

					<div v-show="dh3"  id="zhuti3">
						<div class="div_900px" style="text-align: right;width:120px;float:left;;background: #FFFFFF;">
							<el-menu default-active="31" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" style="border:0px;">
						      <el-menu-item index="31" class="font_yaoti_18px" @click="daohang31">
						        <span slot="title">总通讯录</span>
						      </el-menu-item>
						      <el-menu-item index="32" class="font_yaoti_18px" @click="daohang32">
						        <span slot="title">用户排行</span>
						      </el-menu-item>
						      <el-menu-item index="33" class="font_yaoti_18px">
						        <span slot="title">我的关注</span>
						      </el-menu-item>
						      <el-menu-item index="34" class="font_yaoti_18px">
						        <span slot="title">我的粉丝</span>
						      </el-menu-item>
						      <el-menu-item index="35" class="font_yaoti_18px">
						        <span slot="title">我的小组</span>
						      </el-menu-item>





						    </el-menu>
						</div>

						<div class="div_900px" v-show="dh31" style="text-align: left;width:auto;float:left;">

<br><br>
<el-button size="mini" style="font-size:18px;" round><i class="el-icon-share"></i> 分享</el-button>分享到微信朋友圈 钉钉
<br><br>
<el-button size="mini" style="font-size:18px;" round><i class="el-icon-star-off"></i> 关注</el-button>已经有12人关注。
<br><br>
<el-button size="mini" style="font-size:18px;" round><i class="el-icon-plus"></i> 标签</el-button>已经有12条标签。 -点击展开-


						</div>
						<div class="div_900px" v-show="dh32" style="text-align: left;width:auto;float:left;">这是导航32的页面</div>
					</div>


					<div v-show="dh4"  id="zhuti4">
						<div class="div_900px" style="text-align: right;width:120px;float:left;;background: #FFFFFF;">
							<el-menu default-active="41" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" style="border:0px;">
						      <el-menu-item index="41" class="font_yaoti_18px" @click="daohang41">
						        <span slot="title">我的信息</span>
						      </el-menu-item>
						      <el-menu-item index="42" class="font_yaoti_18px" @click="daohang42">
						        <span slot="title">口碑印象</span>
						      </el-menu-item>
						      <el-menu-item index="43" class="font_yaoti_18px">
						        <span slot="title">我的脑图</span>
						      </el-menu-item>
						      <el-menu-item index="44" class="font_yaoti_18px">
						        <span slot="title">权限设置</span>
						      </el-menu-item>
						      <el-menu-item index="45" class="font_yaoti_18px">
						        <span slot="title">留言板</span>
						      </el-menu-item>
						    </el-menu>
						</div>

						<div class="div_900px" v-show="dh41" style="text-align: left;width:auto;float:left;">
							<div class="touxiang">这是用户本人头像的区域。</div>
							<div class="gerenxinxi">这是用户本人个人信息的区域。</div>
							
						</div>
						<div class="div_900px" v-show="dh42" style="text-align: left;width:auto;float:left;">
							在用户主页中，要加入关注转发，给他留言，他的历史,与我关系,等环节，与我的主页有区别。我的脑图里需要一个我的历史搜索词云的统计数据。</div>
					</div>

					<div v-show="dh5"  id="zhuti5">
						<div class="div_900px" style="text-align: right;width:120px;float:left;;background: #FFFFFF;">
							<el-menu default-active="51" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" style="border:0px;">
						      <el-menu-item index="51" class="font_yaoti_18px" @click="daohang51">
						        <span slot="title">学科分类</span>
						      </el-menu-item>
						      <el-menu-item index="52" class="font_yaoti_18px" @click="daohang52">
						        <span slot="title">地区分类</span>
						      </el-menu-item>
						      <el-menu-item index="53" class="font_yaoti_18px">
						        <span slot="title">时间分类</span>
						      </el-menu-item>
						      <el-menu-item index="54" class="font_yaoti_18px">
						        <span slot="title">预测未来</span>
						      </el-menu-item>

						    </el-menu>
						</div>

						<div class="div_900px" v-show="dh51" style="text-align: left;width:auto;float:left;"></div>
						<div class="div_900px" v-show="dh52" style="text-align: left;width:auto;float:left;">这是导航52的页面</div>
					</div>

					<div v-show="dh6"  id="zhuti6">
						<div class="div_900px" style="text-align: right;width:120px;float:left;;background: #FFFFFF;">
						
						</div>
						<div class="div_900px"  style="text-align: left;width:auto;float:left;">
							尚未完成，敬请等待
						</div>
					</div>

					<div v-show="dh7"  id="zhuti7">
						<div class="div_900px" style="text-align: right;width:120px;float:left;;background: #FFFFFF;">
						
						</div>
						<div class="div_900px"  style="text-align: left;width:auto;float:left;">
							尚未完成，敬请等待
						</div>
					</div>

					<div  class="div_900px"  style="width:120px;float:right;text-align: left;background: #F5F5F5;">
						<div class="square_right">
							<a class="a_noline" target="_blank" href="/#/sousuo">搜</a>
						</div>
						<div class="square_right">增</div>
						<div class="square_right">问</div>
						<div class="square_right">聊</div>
						<div class="square_right">帮</div>
					</div>

				</el-main>

			</el-container>
			
			<el-footer style="height: 40px;background-color: #F5F5F5;">.</el-footer>

		</el-container>




  </div>
</template>

<script>
import chazhaolan from './xiaofujian/chazhaolan.vue'
import xh11 from './xunhuan/xh11.vue'

export default {
  name: 'zhutiye',
	components:{chazhaolan,xh11},
	created:function(){
            this.axios.post("http://api.komavideo.com/news/list").then(body=>{this.content=body.data;});
            this.axios.post("http://127.0.0.1:5000/getMsg").then(body=>{this.msg=body.data.msg;});

	},
	methods: {
// 		tuichujian(){
// this.$router.push({ name: 'denglu', params: { userId: 123 }});
// 		},

            daohang1: function () {this.dh1=true;this.dh2=this.dh3=this.dh4=this.dh5=this.dh6=this.dh7=false;},
            daohang2: function () {this.dh2=true;this.dh1=this.dh3=this.dh4=this.dh5=this.dh6=this.dh7=false;},
						daohang3: function (){this.dh3=true;this.dh1=this.dh2=this.dh4=this.dh5=this.dh6=this.dh7=false;},
						daohang4: function (){this.dh4=true;this.dh1=this.dh2=this.dh3=this.dh5=this.dh6=this.dh7=false;},
						daohang5: function (){this.dh5=true;this.dh1=this.dh2=this.dh3=this.dh4=this.dh6=this.dh7=false;},
						daohang6: function (){this.dh6=true;this.dh1=this.dh2=this.dh3=this.dh4=this.dh5=this.dh7=false;},
						daohang7: function (){this.dh7=true;this.dh1=this.dh2=this.dh3=this.dh4=this.dh5=this.dh6=false;},
						daohang11: function (){this.dh31=true;this.dh32=false;},
						daohang11: function (){this.dh31=true;this.dh32=false;},
						daohang11: function (){this.dh31=true;this.dh32=false;},
						daohang11: function (){this.dh31=true;this.dh32=false;},
						daohang21: function (){this.dh21=true;this.dh22=this.dh23=this.dh24=this.dh25=this.dh26=this.dh27=this.dh28=this.dh29=false;},
						daohang22: function (){this.dh22=true;this.dh21=this.dh23=this.dh24=this.dh25=this.dh26=this.dh27=this.dh28=this.dh29=false;},
						daohang23: function (){this.dh23=true;this.dh21=this.dh22=this.dh24=this.dh25=this.dh26=this.dh27=this.dh28=this.dh29=false;},
						daohang24: function (){this.dh24=true;this.dh21=this.dh22=this.dh23=this.dh25=this.dh26=this.dh27=this.dh28=this.dh29=false;},
						daohang25: function (){this.dh25=true;this.dh21=this.dh22=this.dh23=this.dh24=this.dh26=this.dh27=this.dh28=this.dh29=false;},
						daohang26: function (){this.dh26=true;this.dh21=this.dh22=this.dh23=this.dh24=this.dh25=this.dh27=this.dh28=this.dh29=false;},
						daohang27: function (){this.dh27=true;this.dh21=this.dh22=this.dh23=this.dh24=this.dh25=this.dh26=this.dh28=this.dh29=false;},
						daohang28: function (){this.dh28=true;this.dh21=this.dh22=this.dh23=this.dh24=this.dh25=this.dh26=this.dh27=this.dh29=false;},
						daohang29: function (){this.dh29=true;this.dh21=this.dh22=this.dh23=this.dh24=this.dh25=this.dh26=this.dh27=this.dh28=false;},

						daohang31: function (){this.dh31=true;this.dh32=false;},
						daohang32: function (){this.dh32=true;this.dh31=false;},
						daohang32: function (){this.dh32=true;this.dh31=false;},
						daohang32: function (){this.dh32=true;this.dh31=false;},
						daohang32: function (){this.dh32=true;this.dh31=false;},
						daohang41: function (){this.dh41=true;this.dh42=false;},
						daohang42: function (){this.dh42=true;this.dh41=false;},
						daohang51: function (){this.dh51=true;this.dh52=false;},
						daohang52: function (){this.dh52=true;this.dh51=false;},
						zhankai11: function (){this.zk11=false;this.czl11=true;},
						zhankai21: function (){this.zk21=false;this.czl21=true;},

	
	},
        data () {
            return {
                      dh1:true,dh2:false,dh3:false,dh4:false,dh5:false,dh6:false,dh7:false,
											dh21:true,dh22:false,
											dh31:true,dh32:false,
											dh41:true,dh42:false,
											dh51:true,dh52:false,
											zk11:true,czl11:false,
											zk21:true,czl21:false,
											items:[1111111,222222222,33333333,444444444,5555555],
											content:'',
											msg:'',
            				}
        },




}
</script>

<style>


 .el-header {
					 background-color: #708090;
					 color: #333;
					 text-align: center;
					 line-height: 30px;
		 			}

		 .el-footer {
					 background-color: #FCFCFC;
					 color: #333;
					 text-align: center;
					 line-height: 40px;
					 }

		.el-aside {
					 background-color: #FAFAFA;
					 color: #333;
					 text-align: center;
					 line-height: 200px;
					 }
		.font_yaoti_20px{
					 font-size:20px;
					 font-family:'方正姚体';
						}
		.font_yaoti_18px{
					 font-size:18px;
					 font-family:'方正姚体';
						}
		.font_yahei_18px{
					 font-size:18px;
					 font-family:'微软雅黑';
						}
		.square_right{height: 56px;
					  width:36px;
					  font-size:30px;
					  font-family:'方正姚体';
					  text-align: center;
					  line-height:56px;
						}	

		.div_900px{height:900px;
					padding: 0;
					margin:0;
					display:inline;
						}
		.logo{
			font-size:40px;
			font-family:'华文隶书';
			color:#FFF;
			text-align: left;
			padding: 10px 0 0 0;
						}

		.a_noline{text-decoration: none;cursor:pointer;}


		.first_row_words{
			font-size:18px;
			font-family:'微软雅黑';
			height: 30px;
			text-align: left;
			line-height:30px;

			margin-top: 13px;
				}

		.touxiang{
			width: 250px;
			height: 400px;
			display: inline-block;
		}

		.gerenxinxi{			
			width: auto;
			height: 400px;
			display: inline-block;}

body{margin: 1px;}

		 body > .el-container {margin-bottom: 0px;}
		 .el-container:nth-child(5) .el-aside,
		 .el-container:nth-child(6) .el-aside {line-height: 260px;}
		 .el-container:nth-child(7) .el-aside {line-height: 320px;}

</style>
